<template>
  <div class="Recommend">
    <el-carousel :interval="4000" type="card" height="150px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <el-image :src="item.imageUrl"></el-image>
      </el-carousel-item>
    </el-carousel>
    <h4>推荐歌单<i class="el-icon-arrow-right"></i></h4>
    <MenuList :list="menuList" @itemClick="itemClick"></MenuList>
  </div>
</template>

<script>
import MenuList from '@/components/list/MenuList';
export default {
  data() {
    return {
      banners: '',
      menuList: '',
    };
  },
  computed: {},
  created() {
    this.getData();
  },
  components: { MenuList },
  methods: {
    async getData() {
      const { banners } = await this.$request('/banner');
      this.banners = banners;
      const { result } = await this.$request('/personalized');
      this.menuList = result;
    },
    //歌单点击
    itemClick(id) {
      this.$router.push('/songsmenudetail/' + id);
    },
  },
};
</script>

<style scoped lang='scss'>
.Recommend {
  .el-image {
    border-radius: 10px;
  }
  h4 {
    margin: 10px 0;
  }
}
</style>